<template>
  <div class="box" ref="targetElement">
    <div class="search-box" ref="searchBox">
      <div class="search-top-box">
        <div class="search-top-left-box">
          <el-form label-width="110px" ref="div" :inline="true" :model="formSearch" @submit.native.prevent
            class="demo-form-inline">
            <el-form-item label="项目名称">
              <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.project_name"
                placeholder="输入项目名称"></el-input>
            </el-form-item>
            <el-form-item label="项目品牌">
              <el-select filterable @change="onSearch(1)" clearable class="form-width" v-model="formSearch.brand_id"
                placeholder="选择项目品牌">
                <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目类型">
              <el-select filterable @change="onSearch(1)" clearable class="form-width"
                v-model="formSearch.store_type_id" placeholder="选择项目类型">
                <el-option v-for="item in storeTypeList" :key="item.id" :label="item.store_type_name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="施工进度">
              <el-select filterable @change="onSearch(1)" clearable class="form-width"
                v-model="formSearch.construction_status" placeholder="选择施工进度">
                <el-option label="待进场" :value="42"></el-option>
                <el-option label="施工中" :value="45"></el-option>
                <el-option label="已完工" :value="50"></el-option>
                <el-option label="质保中" :value="60"></el-option>
                <el-option label="质保到期" :value="70"></el-option>
              </el-select>
            </el-form-item>
            <template v-if="moreSearchShow">
              <el-form-item label="项目编号">
                <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.project_number"
                  placeholder="输入项目编号"></el-input>
              </el-form-item>
              <el-form-item label="勘场类型">
                <el-select filterable @change="onSearch(1)" clearable class="form-width"
                  v-model="formSearch.survey_site" placeholder="选择勘场类型">
                  <el-option label="无需勘场" :value="1"></el-option>
                  <el-option label="实地勘场" :value="2"></el-option>
                  <el-option label="勘场出图" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="施工工程经理">
                <el-select filterable @change="onSearch(1)" clearable class="form-width"
                  v-model="formSearch.engineering_manager_id" placeholder="选择施工工程经理">
                  <el-option v-for="item in engineeringManagerList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="工程监理">
                <el-select filterable @change="onSearch(1)" clearable class="form-width"
                  v-model="formSearch.engineering_supervision_id" placeholder="选择工程监理">
                  <el-option v-for="item in engineeringSupervisionList" :key="item.id" :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="合同开工日期">
                <el-date-picker value-format="yyyy-MM-dd" @change="onSearch(1)" clearable class="form-width"
                  v-model="formSearch.contract_commencement_date" type="daterange" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="合同完工日期">
                <el-date-picker value-format="yyyy-MM-dd" @change="onSearch(1)" clearable class="form-width"
                  v-model="formSearch.contract_completion_date" type="daterange" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="实际开工日期">
                <el-date-picker value-format="yyyy-MM-dd" @change="onSearch(1)" clearable class="form-width"
                  v-model="formSearch.on_site_start_date" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="实际完工日期">
                <el-date-picker value-format="yyyy-MM-dd" @change="onSearch(1)" clearable class="form-width"
                  v-model="formSearch.actual_completion_date" type="daterange" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="风险标签">
                <el-select filterable @change="onSearch(1)" clearable class="form-width" v-model="formSearch.risk_label"
                  placeholder="选择风险标签">
                  <el-option label="一次预警" value="一次预警"></el-option>
                  <el-option label="二次预警" value="二次预警"></el-option>
                  <el-option label="已超期" value="已超期"></el-option>
                  <el-option label="停工" value="停工"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="超期类型">
                <el-select filterable @change="onSearch(1)" clearable class="form-width"
                  v-model="formSearch.overdue_type_id" placeholder="选择超期类型">
                  <el-option v-for="(item, index) in overdueTypeList" :label="item.name" :value="item.id"
                    :key="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="预计完工日期">
                <el-date-picker value-format="yyyy-MM-dd" @change="onSearch(1)" clearable class="form-width"
                  v-model="formSearch.estimated_completion_date" type="daterange" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="验收进度">
                <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.acceptance_progress"
                  placeholder="输入验收进度"></el-input>
              </el-form-item>
            </template>
          </el-form>
        </div>
        <div class="search-top-right-box">
          <p @click="moreSearchFunc">
            {{ moreSearchShow ? "收起" : "展开"
            }}<i :class="moreSearchShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
          </p>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </div>
      </div>
    </div>
    <!-- table -->
    <div class="page-list" ref="pageList">
      <div class="list-top-box">
        <div class="tab-box">
          <el-tabs v-model="formSearch.to_do" @tab-click="onSearch(1)">
            <el-tab-pane label="全部" name="0"></el-tab-pane>
            <el-tab-pane label="待处理" name="1"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="list-top-box-right">
          <p class="list-top-box-left">
            已选<span class="num">{{ multipleSelection.length }}</span>/{{ tableData.length }}数据
          </p>
          <el-button type="primary" :disabled="tableData.length == 0" @click="exportVisible = true"
            v-if="$isPer(permission, ['engineering_exportEngineeringExcel'])">导出项目列表</el-button>
          <el-button type="primary" :disabled="qualityRating" @click="projectQualityRatingFunc"
            v-if="$isPer(permission, ['projects_projectQualityRating'])">项目质量评分</el-button>
          <el-button type="primary" :disabled="changeMan" @click="changeManFunc"
            v-if="$isPer(permission, ['edit_manager'])">更换施工工程经理</el-button>
          <el-button type="primary" :disabled="FPgcMan" @click="FPgcManFunc"
            v-if="$isPer(permission, ['add_manager'])">分配施工工程经理</el-button>
          <el-button type="primary" :disabled="QRStartup" @click="QRStartupFunc"
            v-if="$isPer(permission, ['construction_submit'])">开工</el-button>
          <el-button :disabled="JJOrder" @click.native="gcjljjjdVisible = true"
            v-if="$isPer(permission, ['refuse_orders'])">拒绝接单</el-button>
        </div>
      </div>
      <div class="table-box" v-loading="pageLoading">
        <el-table border ref="table" @row-click="handleHighlightChangeTable" highlight-selection-row :header-cell-style="{
          background: '#FAFBFC',
          color: '#828A9D',
          textAlign: 'center',
        }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" :data="tableData"
          @selection-change="handleSelectionChange" height="100%">
          <el-table-column type="selection" width="80"></el-table-column>
          <el-table-column min-width="140px" prop="" label="ID" fixed="left">
            <template slot-scope="scope">
              <el-button v-if="$isPer(permission, ['construction_detail'])" type="text"
                @click="goToDetail(scope.row)">{{ $assemblyListNo('SGXM', scope.row.id) }}</el-button>
              <span v-else>{{ $assemblyListNo('SGXM', scope.row.id) }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_xmmc')" min-width="180px" fixed="left" prop="project_name"
            label="项目名称" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.project_name || "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_xmbh')" min-width="130px" fixed="left" prop="project_number"
            label="项目编号" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_xmpp')" min-width="120px" fixed="left" prop="" label="项目品牌"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag :color="`${scope.row.brand_colour}`" style="color: #ffffff;">
                {{ scope.row.brand_name }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_xmlx')" min-width="120px" prop="" label="项目类型"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.store_type_name || "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_kclx')" min-width="120px" prop="" label="勘场类型"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.survey_site == 1">无需勘场</span>
              <span v-if="scope.row.survey_site == 2">实地勘场</span>
              <span v-if="scope.row.survey_site == 3">勘场出图</span>
              <span v-if="!scope.row.survey_site">--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_sggcjl')" min-width="120px" prop="engineering_manager_name"
            label="施工工程经理" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.engineering_manager_name || "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_gcjl')" min-width="120px" prop="engineering_supervision_name"
            label="工程监理" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.engineering_supervision_name || "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_sggz')" min-width="120px" prop="foreman_name" label="施工工长"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.foreman_name || "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_htkgrq')" min-width="120px" prop="" label="合同开工日期"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.contract_commencement_date || "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_htwgrq')" min-width="120px" prop="" label="合同完工日期"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.contract_completion_date || "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_htgq')" min-width="100px" prop="" label="合同工期"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.contract_duration_days ? scope.row.contract_duration_days + '天' : '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_sgjd')" min-width="100px" prop="" label="施工进度"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.construction_status == 30">待进场</span>
              <span v-if="scope.row.construction_status == 35">待进场</span>
              <span v-if="scope.row.construction_status == 40">待进场</span>
              <span v-if="scope.row.construction_status == 42">待进场</span>
              <span v-if="scope.row.construction_status == 45">施工中</span>
              <span v-if="scope.row.construction_status == 50">已完工</span>
              <span v-if="scope.row.construction_status == 60">质保中</span>
              <span v-if="scope.row.construction_status == 70">质保到期</span>
              <span v-if="!scope.row.construction_status">--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_sjkgrq')" min-width="120px" prop="" label="实际开工日期"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.on_site_start_date || "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_sjwgrq')" min-width="120px" prop="" label="实际完工日期"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.actual_completion_date || "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_sjgq')" min-width="90px" prop="" label="实际工期" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.actual_duration ? scope.row.actual_duration + '天' : '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_swwcsj')" min-width="120px" prop="" label="收尾完成时间"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.closeout_complete_date ? scope.row.closeout_complete_date : '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_fxbq')" min-width="100px" prop="" label="风险标签"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.risk_label || "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_cqlx')" min-width="110px" prop="" label="超期类型"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.overdue_type || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_yjwgrq')" min-width="120px" prop="" label="预计完工日期"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.estimated_completion_date || "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_cqyy')" min-width="180px" prop="" label="超期原因"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.reason_overdue || "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_cqjhwgrq')" min-width="140px" prop="" label="超期计划完工日期"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.overdue_completion_date || "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_ysjd')" min-width="150px" prop="" label="验收进度"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.acceptance_progress || "--" }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_yzg')" min-width="80px" prop="" label="已整改" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.rectified ? scope.row.rectified + '项' : '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_wzg')" min-width="80px" prop="" label="未整改" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.not_rectified ? scope.row.not_rectified + '项' : '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_shwwc')" min-width="100px" prop="" label="售后未完成"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.after_sales_not_completed ? scope.row.after_sales_not_completed + '项' : '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sg_shywc')" min-width="100px" prop="" label="售后已完成"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.after_sales_completed ? scope.row.after_sales_completed + '项' : '--' }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-footer">
        <el-pagination class="el-pagination" @current-change="handleCurrentChange" :current-page="page" :page-size="num"
          @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 分配施工工程经理 -->
    <fpgcjCom @onSuccess="fpgcOnSuccess" :project_id="multipleSelection.length ? multipleSelection[0].id : ''"
      :detailData="multipleSelection.length ? multipleSelection[0] : ''" :addDialogVisible="fpgcjVisible"
      @onClose="fpgcjVisible = false"></fpgcjCom>
    <!-- 导出施工项目列表 -->
    <el-dialog :modal-append-to-body="false" title="导出项目列表字段选择" :visible.sync="exportVisible" width="680px"
      :before-close="exportCloseFunc">
      <el-checkbox class="checkbox-item" v-model="allChecked" @change="allCheckedChangeFunc">全选</el-checkbox>
      <div v-loading="exportLoading">
        <div class="export-scroll">
          <el-checkbox-group v-model="exportrVal">
            <el-checkbox class="checkbox-item" v-for="(item, index) in exportArr" :key="index" :label="item.label"
              border></el-checkbox>
          </el-checkbox-group>
        </div>
        <p v-if="exportUrl">导出文件链接：<el-button @click="$openUrlFunc(exportUrl[0])" type="text">{{
          exportUrl[1]
            }}</el-button></p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportSubmitFunc">提交</el-button>
        <el-button @click="exportCloseFunc">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 人员修改 -->
    <changeManCom :projectId="multipleSelection.length ? multipleSelection[0].id : 0"
      :changeDialogVisible="changeManVisible" :type="7" @changeManCancelFunc="changeManVisible = false"
      @changeManSuccessFunc="changeManSuccessFunc"></changeManCom>
    <!-- 工程经理拒绝接单 -->
    <gcjljjjdCom :project_id="multipleSelection.length ? multipleSelection[0].id : ''"
      :addDialogVisible="gcjljjjdVisible" @onClose="gcjljjjdVisible = false" @onSuccess="fpgcOnSuccess"></gcjljjjdCom>
    <!-- 质量评分 -->
    <el-dialog :modal-append-to-body="false" :append-to-body="false" title="质量评分"
      :visible.sync="projectQualityRatingVisible" width="500px">
      <el-form label-position="top" v-if="multipleSelection.length" class="el-form-rate">
        <el-form-item label="" prop="name">
          <el-descriptions border :column="1">
            <el-descriptions-item label="项目名称">{{ multipleSelection[0].project_name }}</el-descriptions-item>
            <el-descriptions-item label="项目编号">{{ multipleSelection[0].project_number }}</el-descriptions-item>
          </el-descriptions>
        </el-form-item>
        <el-form-item label="质量评分" prop="name">
          <!-- <el-rate class="el-rate" v-model="projectQualityRating"></el-rate> -->
          <el-input v-input-limit="0" type="number" oninput="if(value){value=value.replace(/[^\d]/g,1);
 if(Number(value)<=0){value=1}} if(Number(value)>100){value=100}" v-model="projectQualityRating" style="width: 100%;"
            placeholder="1~100分" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="projectQualityRatingSubmit">提交</el-button>
        <el-button @click="projectQualityRatingCancel">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import projectApi from "@/api/projectApi";
import adminApi from "@/api/adminApi";
import commonApi from "@/api/common";
import configApi from "@/api/configApi";
import brandApi from "@/api/brandApi";
import { getUserInfo } from "@/utils/auth";
import engineeringApi from "@/api/engineeringApi";
import storeTypeApi from "@/api/storeTypeApi";
import fpgcjCom from "@/components/projectPopu/fpgcjCom/index"; //分配施工工程经理
import changeManCom from "@/components/changeManCom/index";//修改人员
import gcjljjjdCom from "@/components/projectPopu/gcjljjjdCom/index";//施工工程经理拒绝接单
import { exportEngineeringFideldArr } from '@/utils/exportField'
export default {
  name: "constructionManagement",
  components: { fpgcjCom, changeManCom, gcjljjjdCom },
  data() {
    return {
      // 质量评分
      projectQualityRatingVisible: false,
      projectQualityRating: null,

      // 工程经理拒绝接单
      gcjljjjdVisible: false,
      // 修改人员
      changeManVisible: false,
      // 导出用户列表
      allChecked: false,//是否全选字段
      exportLoading: false,//导出loading
      exportVisible: false,//导出弹窗
      exportUrl: '',//导出url
      exportrVal: [],//导出勾选字段
      exportArr: exportEngineeringFideldArr,//导出字段数组


      // 分配施工工程经理
      fpgcjVisible: false,
      userInfo: "",
      tableData: [],
      formSearch: {
        to_do: '0',
      },
      moreSearchShow: false,
      page: 1,
      num: 10,
      total: 0,
      pageLoading: false,
      multipleSelection: [],
      storeTypeList: [], //门店类型
      engineeringManagerList: [], //施工经理列表
      engineeringSupervisionList: [], //工程监理列表
      brandList: [], //品牌列表
      permission: [],//操作权限
      overdueTypeList: [],//超期类型列表
    };
  },
  watch: {},
  computed: {
    // 工程质量评分
    qualityRating() {
      let multipleSelection = this.multipleSelection;
      if (multipleSelection.length == 1 &&
        multipleSelection[0].construction_status == 50) {
        return false;
      } else {
        return true;
      }
    },
    // 工程经理拒绝接单 && this.userInfo.position_id == 7
    JJOrder() {
      let multipleSelection = this.multipleSelection;
      if (multipleSelection.length == 1 &&
        multipleSelection[0].engineering_manager_id == this.userInfo.userid &&
        (multipleSelection[0].construction_status == 42 &&
          multipleSelection[0].status < 1092)) {
        return false;
      } else {
        return true;
      }
    },
    // 修改人员 && this.userInfo.position_id == 10
    changeMan() {
      let multipleSelection = this.multipleSelection;
      if (multipleSelection.length == 1 &&
        multipleSelection[0].engineering_manager_name) {
        return false;
      } else {
        return true;
      }
    },
    // 开工this.userInfo.position_id == 8 &&
    QRStartup() {
      if (
        this.multipleSelection.length == 1 &&
        this.multipleSelection[0].engineering_manager_name &&
        this.multipleSelection[0].construction_status == 42
      ) {
        return false;
      } else {
        return true;
      }
    },
    // 分配工程经理 this.userInfo.position_id == 6 &&
    FPgcMan() {
      if (
        this.multipleSelection.length == 1 &&
        !this.multipleSelection[0].engineering_manager_name &&
        this.multipleSelection[0].construction_status == 35

      ) {
        return false;
      } else {
        return true;
      }
    },
  },
  activated() {
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.handleResize);
    this.hrefQueryFunc(() => {
      this.onSearch();
    })
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
    // 移除窗口大小变化事件监听器，防止内存泄漏
    if (this.resizeObserver) {
      // 停止观察目标元素，防止内存泄漏
      this.resizeObserver.disconnect();
    }
  },
  deactivated() {
    window.removeEventListener('resize', this.handleResize);
    // 移除窗口大小变化事件监听器，防止内存泄漏
    if (this.resizeObserver) {
      // 停止观察目标元素，防止内存泄漏
      this.resizeObserver.disconnect();
    }
  },
  mounted() {
    this.handleResize();
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.handleResize);
    // 操作权限
    this.$getHtmlAuthority(this.$route.path).then(res => {
      console.log(res, "getHtmlAuthority");
      this.permission = res.data.permission;
    })
    this.hrefQueryFunc(() => {
      this.engineeringProjectList(); //项目列表
      this.getStoreTypeList(); //门店类型
      this.getAdminList(); //工程监理列表
      this.getAdminList_();//施工经理列表
      this.getBrandList(); //品牌列表
      this.getOverdueType();
    })
    this.userInfo = getUserInfo();
  },
  methods: {
    // 超期类型
    getOverdueType() {
      configApi.getList({
        page: 1,
        num: 999
      }, 1).then(res => {
        console.log(res, "超期类型")
        if (res.code == 200) {
          this.overdueTypeList = res.data.list;
        }
      })
    },
    handleResize() {
      const target = this.$refs.targetElement;
      const searchBox = this.$refs.searchBox;
      const pageList = this.$refs.pageList;
      // 创建 ResizeObserver 实例
      const resizeObserver = new ResizeObserver(entries => {
        setTimeout(() => {
          console.log('元素变为:', searchBox.offsetHeight);
          // searchBox.offsetHeight + 'px'
          pageList.style.height = 'calc(100% - ' + (searchBox.offsetHeight + 15) + 'px)';
        }, 0);
      });
      // 开始观察目标元素
      resizeObserver.observe(target);

      // 存储 resizeObserver 实例，以便在组件销毁时停止观察
      this.resizeObserver = resizeObserver;
    },
    // 项目质量评分
    projectQualityRatingCancel() {
      this.projectQualityRatingVisible = false;
      this.projectQualityRating = null;
    },
    projectQualityRatingFunc() {
      this.projectQualityRatingVisible = true;
    },
    //  质量评分请求
    projectQualityRatingSubmit() {
      if (!this.projectQualityRating) {
        this.$message.warning('请先打分');
        return;
      }
      projectApi.projectQualityRating({
        project_quality_rating: this.projectQualityRating,
        project_id: this.multipleSelection[0].id
      }).then(res => {
        console.log(res, "质量评分")
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.onSearch();
          this.projectQualityRatingCancel();
        } else {
          this.$message({
            type: 'warning',
            message: res.message
          })
        }
      })
    },
    // 跳转判断的
    hrefQueryFunc(cb) {
      let query = this.$route.query;
      if (JSON.stringify(query) != "{}") {
        this.formSearch.project_name = query.project_name || '';//筛选项目名
        this.formSearch.to_do = query.to_do || '0';//是否待处理
        this.formSearch.construction_status = query.construction_status || '';
        this.formSearch.risk_label = query.risk_label || '';
      }
      cb && cb();
    },
    // 修改人员
    changeManFunc() {
      this.changeManVisible = true;
    },
    // 修改人员请求成功
    changeManSuccessFunc() {
      this.onSearch();
      this.changeManVisible = false;
    },
    // 导出列表确认
    exportSubmitFunc() {
      let exportrVal = this.exportrVal;//已勾选
      let exportArr = this.exportArr;//所有字段
      let formSearch = this.formSearch;//列表筛选项
      if (!exportrVal.length) {
        this.$message({
          type: 'warning',
          message: "请勾选需要导出的字段"
        })
        return;
      }
      let field_list = [];//提交列表
      exportrVal.forEach(item => {
        let index = exportArr.findIndex(child => {
          return item == child.label;
        })
        if (index != -1) {
          field_list.push(exportArr[index].value);
        }
      })
      this.exportEngineeringExcel({
        field_list,
        project_name: formSearch.project_name || "",
        project_number: formSearch.project_number || "",
        brand_id: formSearch.brand_id || "",
        store_type_id: formSearch.store_type_id || "",
        survey_site: formSearch.survey_site || "",
        engineering_manager_id: formSearch.engineering_manager_id || "",
        engineering_supervision_id: formSearch.engineering_supervision_id || "",
        contract_commencement_date_start: formSearch.contract_commencement_date
          ? formSearch.contract_commencement_date[0]
          : "",
        contract_commencement_date_end: formSearch.contract_commencement_date
          ? formSearch.contract_commencement_date[1]
          : "",
        contract_completion_date_start: formSearch.contract_completion_date
          ? formSearch.contract_completion_date[0]
          : "",
        contract_completion_date_end: formSearch.contract_completion_date
          ? formSearch.contract_completion_date[1]
          : "",
        construction_status: formSearch.construction_status || "",
        risk_label: formSearch.risk_label || "",
        estimated_completion_date_start: formSearch.estimated_completion_date ? formSearch.estimated_completion_date[0] : '',
        estimated_completion_date_end: formSearch.estimated_completion_date ? formSearch.estimated_completion_date[1] : '',
        acceptance_progress: formSearch.acceptance_progress || '',

        overdue_type_id: formSearch.overdue_type_id || '',
        on_site_start_date_start: formSearch.on_site_start_date
          ? formSearch.on_site_start_date[0]
          : "",
        on_site_start_date_end: formSearch.on_site_start_date
          ? formSearch.on_site_start_date[1]
          : "",
        actual_completion_date_start: formSearch.actual_completion_date
          ? formSearch.actual_completion_date[0]
          : "",
        actual_completion_date_end: formSearch.actual_completion_date
          ? formSearch.actual_completion_date[1]
          : "",
      })
    },
    exportEngineeringExcel(obj) {
      this.exportLoading = true;
      engineeringApi.exportEngineeringExcel(obj).then(res => {
        console.log(res, "导出施工项目列表")
        this.exportLoading = false;
        if (res.code == 200) {
          this.exportUrl = res.data;
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 导出字段全选
    allCheckedChangeFunc(e) {
      let exportrVal = [];
      console.log(e)
      let exportArr = this.exportArr;
      if (e) {
        exportArr.forEach(item => {
          exportrVal.push(item.label);
        })
        this.exportrVal = exportrVal//已选择字段
      } else {
        this.exportrVal = exportrVal//已选择字段
      }
    },
    // 关闭导出弹窗
    exportCloseFunc() {
      this.exportVisible = false;
      this.allChecked = false;
      this.exportrVal = [];
      this.exportUrl = '';
    },
    // 确认开工
    QRStartupFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: "/qrkssgCom",
        query: {
          id: this.multipleSelection[0].id,
        },
      });
    },
    // 分配施工工程经理成功回调
    fpgcOnSuccess() {
      this.fpgcjVisible = false;
      this.gcjljjjdVisible = false;
      this.onSearch();
    },
    // 分配施工工程经理
    FPgcManFunc() {
      this.fpgcjVisible = true;
    },
    // table单行点击
    handleHighlightChangeTable(row) {
      if (!row.disabled) {
        this.$refs.table.toggleRowSelection(row);
      }
    },
    // 品牌列表
    getBrandList() {
      brandApi
        .getBrandList({
          page: 1,
          num: 999,
        })
        .then((res) => {
          console.log(res, "品牌列表");
          if (res.code == 200) {
            this.brandList = res.data.list;
          }
        });
    },
    // 施工经理列表
    getAdminList_() {
      adminApi
        .getAdminList({
          page: 1,
          num: 999,
          identity: 2,
          position_id_arr: [7],
        })
        .then((res) => {
          console.log(res, "施工经理列表");
          if (res.code == 200) {
            this.engineeringManagerList = res.data.list;
          }
        });
    },
    // 工程监理
    getAdminList() {
      adminApi
        .getAdminList({
          page: 1,
          num: 999,
          identity: 1,
          position_id_arr: [8],
        })
        .then((res) => {
          console.log(res, "工程监理列表");
          if (res.code == 200) {
            this.engineeringSupervisionList = res.data.list;
          }
        });
    },
    // 门店类型列表
    getStoreTypeList() {
      storeTypeApi
        .getStoreTypeList({
          page: 1,
          num: 999,
        })
        .then((res) => {
          console.log(res, "门店类型列表");
          if (res.code == 200) {
            this.storeTypeList = res.data.list;
          }
        });
    },
    // 项目列表
    engineeringProjectList() {
      let formSearch = this.formSearch;
      this.pageLoading = true;
      engineeringApi
        .engineeringProjectList({
          page: this.page,
          num: this.num,
          to_do: formSearch.to_do || 0,
          project_name: formSearch.project_name || "",
          project_number: formSearch.project_number || "",
          brand_id: formSearch.brand_id || "",
          store_type_id: formSearch.store_type_id || "",
          survey_site: formSearch.survey_site || "",
          engineering_manager_id: formSearch.engineering_manager_id || "",
          engineering_supervision_id: formSearch.engineering_supervision_id || "",
          contract_commencement_date_start: formSearch.contract_commencement_date
            ? formSearch.contract_commencement_date[0]
            : "",
          contract_commencement_date_end: formSearch.contract_commencement_date
            ? formSearch.contract_commencement_date[1]
            : "",
          contract_completion_date_start: formSearch.contract_completion_date
            ? formSearch.contract_completion_date[0]
            : "",
          contract_completion_date_end: formSearch.contract_completion_date
            ? formSearch.contract_completion_date[1]
            : "",
          construction_status: formSearch.construction_status || "",
          risk_label: formSearch.risk_label || "",
          estimated_completion_date_start: formSearch.estimated_completion_date ? formSearch.estimated_completion_date[0] : '',
          estimated_completion_date_end: formSearch.estimated_completion_date ? formSearch.estimated_completion_date[1] : '',
          acceptance_progress: formSearch.acceptance_progress || '',

          overdue_type_id: formSearch.overdue_type_id || '',
          on_site_start_date_start: formSearch.on_site_start_date
            ? formSearch.on_site_start_date[0]
            : "",
          on_site_start_date_end: formSearch.on_site_start_date
            ? formSearch.on_site_start_date[1]
            : "",
          actual_completion_date_start: formSearch.actual_completion_date
            ? formSearch.actual_completion_date[0]
            : "",
          actual_completion_date_end: formSearch.actual_completion_date
            ? formSearch.actual_completion_date[1]
            : "",
        })
        .then((res) => {
          console.log(res, "项目列表");
          this.pageLoading = false;
          if (res.code == 200) {
            this.tableData = res.data.list;
            this.total = res.data.max;
          }
        });
    },
    // 单页数据量修改
    handleSizeChange(e) {
      this.num = e;
      this.onSearch(1);
    },
    // 页面权限
    getHtmlAuthority() {
      commonApi
        .getHtmlAuthority({
          path: this.$route.path,
        })
        .then((res) => {
          console.log(res, "页面权限");
          if (res.code == 200) {
            this.HtmlAuthority = res.data;
          }
        });
    },
    // 搜索
    onSearch(page) {
      this.page = typeof page == "number" ? page : this.page;
      this.engineeringProjectList();
    },
    // 翻页
    handleCurrentChange(page) {
      this.onSearch(page);
    },
    moreSearchFunc() {
      this.moreSearchShow = !this.moreSearchShow;
      this.$nextTick(() => {
        this.handleResize();
      })
    },
    goToDetail(row) {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: "/constructionDetailPage",
        query: {
          id: row.id,
        },
      });
    },
    handleSelectionChange(e) {
      console.log(e);
      this.multipleSelection = e;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
@import "@/styles/listPage.scss";
</style>
